<template>
  <div class="body" v-loading="loading"><div class="header">
    <div class="title"><span>大连晓芹食品有限公司领料入库单</span></div>
    <el-col :span="8">
      <vue-qr ref="qrCode" :text="header.taskBillNo" style="margin: 0 20px 10px 0" width="220" height="220"></vue-qr>
      <div style="margin: 0 10px 10px 0;font-size: 30px">No.{{ header.billNo }}</div>
    </el-col>
  </div>
    <div class="neck">
      <el-row>
<!--        <el-col :span="8">-->
<!--          <span>生产任务：</span>{{}}-->
<!--        </el-col>-->
        <el-col :span="12">
          <span>生产任务编号：</span>{{ header.taskBillNo }}
        </el-col>
        <el-col :span="12">
          <span>入库时间：</span>{{ header.createTime}}
        </el-col>
      </el-row>
    </div>

    <div class="body1">
      <table class="v-table" cellpadding="0" cellspacing="0">
        <tr>
          <th class="center">序号</th>

          <th>产品编码</th>
          <th>仓库</th>
          <th >产品名称</th>
          <th>规格</th>
          <th>批次号</th>
          <th>入库数量</th>
          <th>单位</th>
        </tr>
        <tr v-for="(d, i) in dataList">
          <td class="center">{{ i + 1 }}</td>

          <td>{{ d.materialNo }}</td>
          <td>{{ getStockName(d.stockNo) }}

          </td>
          <td>{{ d.materialName }}</td>
          <td>{{ d.materialSpec }}</td>
          <td>{{ d.batchNo }}</td>
          <td>{{ d.count }}</td>
          <td>{{ d.unit }}</td>
        </tr>
      </table>
    </div>
    <div class="foot">
      <el-row>
        <el-col :span="6">
          <span>合计：</span>{{ header.count }}
        </el-col>
<!--        <el-col :span="6">-->
<!--          <span>领料人：</span>{{ header.createUserName }}-->
<!--        </el-col>-->

      </el-row>
      <el-row>
        <!--        <el-col :span="6">-->
        <!--          &lt;!&ndash;          <span>制单：{{_userInfo.nickName}}</span>&ndash;&gt;-->
        <!--        </el-col>-->
        <el-col :span="6">
          <span>入库申请人：</span>{{  header.createUserName }}
        </el-col>
        <el-col :span="6">
          <span>库管：</span>{{ header.createUserName }}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <span>备注：</span>
        </el-col>
        <el-col :span="12">
          <span>生产任务编号：</span>{{ header.taskBillNo }}
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { getBoxNo } from '../../utils'
import BatchAddRowDialog from "../components/batchAddRowDialog.vue";
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
export default {
  components: {BatchAddRowDialog, vueQr},
  data() {
    return {
      loading: false,
      header: {},
      dataList: []
    }
  },
  async mounted() {
    await this.getStock()
    let billNo = this.$route.query.billNo
    if (billNo) {
      return this.getBill(billNo)
    }
  },
  methods: {
    async getStock() {
      this.loading = true;
      try {
        let res = await this.$api.getChildDictionaryListByKeys({
          keys: ['stock']
        });
        if (!res.res) return;
        this.stockList = res.stock;
      } finally {
        this.loading = false;
      }
    },
    /**
     * 获取状态名
     */
    getStockName(val) {
      if (this.stockList && this.stockList.length > 0) {
        for(let i = 0; i < this.stockList.length; i++) {
          if (this.stockList[i].key === val) {
            return this.stockList[i].name;
          }
        }
      }
      return '';
    },
    async getBill(billNo) {
      this.loading = true
      debugger
      try {
        let res = await this.callApi('get_prd_in_detail', {
          billNo: billNo
        })
        if (res.res) {
          this.header = res.header || {}
          this.dataList = res.data || []
        }
      } finally {
        this.loading = false
      }
    },
  }
}
</script>

<style lang="scss" scoped>

.body {
  width: 100%;
  .header {
    padding: 0 30px 30px;
    display: flex;
    justify-content: space-between;
    .title {
      text-align: center;
      font-size: 30px;
      width: 100%;
      padding-left: 150px;
      padding-top: 50px;
      //span {
      //  border-bottom:6px double black;
      //}
    }
  }

  .neck {
    padding: 0 25px;
    font-size: 35px;
  }

  .body1 {
    padding: 10px 20px 20px 20px;
    font-family: 黑体;
    .v-table {
      width: 100%;
      border-collapse: collapse;
      tr {
        font-size: 35px;
        td {
          border: 2px solid var(--el-text-color-primary) !important;
          padding: 5px;
          &.center {
            text-align: center;
          }
          &.right {
            text-align: right;
          }
        }
        th {
          border: 2px solid var(--el-text-color-primary) !important;
          padding: 5px;
          &.center {
            text-align: center;
          }
          &.right {
            text-align: right;
          }
        }
      }
    }


    //:deep(.el-table__row) {
    //  font-size: 20px;
    //}
    //
    //:deep(.el-table) {
    //  &::before {
    //    height: 0 !important;
    //  }
    //  .el-table__header {
    //    font-size: 16px;
    //  }
    //
    //}

    :deep(.el-table--border){
      &::after {
        width: 0 !important;
      }
    }
  }


  .foot {
    padding: 0 25px;
    font-size: 30px;
    font-family: 黑体;
    .el-row {
      margin-bottom: 10px;
    }
  }
}

</style>
